---
type: integration
title: '@astrojs/tailwind'
description: "Apprenez comment utiliser l'intégration @astrojs/tailwind dans votre projet Astro."
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/tailwind/'
category: other
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

Cette **[intégration Astro][astro-integration]** apporte les classes CSS utilitaires de [Tailwind](https://tailwindcss.com/) à chaque fichier `.astro` et [composant de framework](/fr/guides/framework-components/) de votre projet, ainsi que le support du fichier de configuration de Tailwind.

## Pourquoi Tailwind ?

Tailwind vous permet d'utiliser des classes utilitaires au lieu d'écrire du CSS. Ces classes utilitaires sont pour la plupart identiques à certaines propriétés CSS : par exemple, ajouter le `text-lg` à un élément équivaut à définir `font-size : 1.125rem` en CSS. Vous trouverez peut-être plus facile d'écrire et de maintenir vos styles en utilisant ces classes utilitaires prédéfinies !

Si vous n'aimez pas ces paramètres prédéfinis, vous pouvez [personnaliser le fichier de configuration de Tailwind](https://tailwindcss.com/docs/configuration) en fonction des exigences de conception de votre projet. Par exemple, si le "grand texte" de votre projet est en fait du `2rem`, vous pouvez [changer le paramètre `lg` fontSize](https://tailwindcss.com/docs/font-size#customizing-your-theme) en `2rem`.

Tailwind est également un excellent choix pour ajouter des styles aux composants React, Preact ou Solid, qui ne supportent pas la balise `<style>` dans le fichier du composant.

Note: Il est généralement déconseillé d'utiliser à la fois Tailwind et une autre méthode de style (par exemple Styled Components) dans le même fichier.

## Installation

Astro inclut une commande `astro add` pour automatiser l'installation des intégrations officielles. Si vous préférez, vous pouvez [installer les intégrations manuellement](#installation-manuelle) à la place.

Exécutez l'une des commandes suivantes dans une nouvelle fenêtre de terminal.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add tailwind
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add tailwind
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add tailwind
    ```
  </Fragment>
</PackageManagerTabs>

Si vous rencontrez des problèmes, [n'hésitez pas à nous les signaler sur GitHub](https://github.com/withastro/astro/issues) et essayez les étapes d'installation manuelle ci-dessous.

### Installation manuelle

Tout d'abord, installez les paquets `@astrojs/tailwind` et `tailwindcss` en utilisant votre gestionnaire de paquets.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/tailwind tailwindcss
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/tailwind tailwindcss
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/tailwind tailwindcss
    ```
  </Fragment>
</PackageManagerTabs>

Ensuite, appliquez l'intégration à votre fichier de configuration Astro en utilisant la propriété `integrations` :

```js ins={2} ins="tailwind()" title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  // ...
  integrations: [tailwind()],
});
```

Ensuite, créez un fichier `tailwind.config.mjs` dans le répertoire racine de votre projet. Vous pouvez utiliser la commande suivante pour générer un fichier de configuration de base :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx tailwindcss init
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm dlx tailwindcss init
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn dlx tailwindcss init
    ```
  </Fragment>
</PackageManagerTabs>

Enfin, ajoutez cette configuration de base à votre fichier `tailwind.config.mjs` :

```js ins={3} title="tailwind.config.mjs" "content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}']"
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

## Utilisation

Lorsque vous installez l'intégration, les classes utilitaires de Tailwind devraient être prêtes à l'emploi. Rendez-vous sur le site [Tailwind docs](https://tailwindcss.com/docs/utility-first) pour apprendre à utiliser Tailwind, et si vous voyez une classe utilitaire que vous voulez essayer, ajoutez-la à n'importe quel élément HTML de votre projet !

Le [Autoprefixer](https://github.com/postcss/autoprefixer) est également configuré automatiquement lorsque vous travaillez en mode dev, et pour les builds de production, de sorte que les classes Tailwind fonctionneront dans les anciens navigateurs.

## Configuration

### Configuration de Tailwind

Si vous avez utilisé les instructions d'installation rapide et que vous avez répondu oui à chaque question, vous verrez un fichier `tailwind.config.mjs` dans le répertoire racine de votre projet. Utilisez ce fichier pour vos changements de configuration de Tailwind. Vous pouvez apprendre à personnaliser Tailwind en utilisant ce fichier [dans la documentation de Tailwind](https://tailwindcss.com/docs/configuration).

S'il n'est pas là, vous ajoutez votre propre fichier `tailwind.config.(js|cjs|mjs|ts|mts|cts)` dans le répertoire racine et l'intégration utilisera ses configurations. Cela peut être intéressant si vous avez déjà configuré Tailwind dans un autre projet et que vous souhaitez transférer ces paramètres dans celui-ci.

### Configuration de l'intégration

L'intégration Astro Tailwind gère la communication entre Astro et Tailwind et possède ses propres options. Modifiez-les dans le fichier `astro.config.mjs` (*pas* le fichier de configuration de Tailwind) qui est l'endroit où se trouvent les paramètres d'intégration de votre projet.

#### configFile

Précédemment connu sous le nom de `config.path` dans `@astrojs/tailwind` v3. Voir le [changelog v4](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) pour mettre à jour votre configuration.

Si vous voulez utiliser un fichier de configuration Tailwind différent au lieu du fichier par défaut `tailwind.config.(js|cjs|mjs|ts|mts|cts)`, spécifiez l'emplacement de ce fichier en utilisant l'option `configFile` de cette intégration. Si `configFile` est relatif, il sera résolu par rapport au répertoire de travail courant.

:::caution
Il n'est pas recommandé de changer cela car cela peut causer des problèmes avec d'autres outils qui s'intègrent à Tailwind, comme l'extension officielle Tailwind VSCode.
:::

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  // ...
  integrations: [
    tailwind({
      // Exemple : Fournir un chemin personnalisé vers un fichier de configuration Tailwind
      configFile: './custom-config.mjs',
    }),
  ],
});
```

#### applyBaseStyles

Précédemment connu sous le nom de `config.applyBaseStyles` dans `@astrojs/tailwind` v3. Voir le [v4 changelog](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) pour mettre à jour votre configuration.

Par défaut, l'intégration importe un fichier basique `base.css` sur chaque page de votre projet. Ce fichier CSS de base inclut les trois directives `@tailwind` principales :

```css title="base.css"
/* The integration's default injected base.css file */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Pour désactiver ce comportement par défaut, mettez `applyBaseStyles` à `false`. Cela peut être utile si vous avez besoin de définir votre propre fichier `base.css` (pour inclure une directive [`@layer`](https://tailwindcss.com/docs/functions-and-directives#layer), par exemple). Cela peut aussi être utile si vous ne voulez pas que `base.css` soit importé sur chaque page de votre projet.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  // ...
  integrations: [
    tailwind({
      // Exemple : Désactiver l'injection d'un import `base.css` de base sur chaque page.
      // Utile si vous avez besoin de définir et/ou d'importer votre propre `base.css`.
      applyBaseStyles: false,
    }),
  ],
});
```

Vous pouvez maintenant [importer votre propre `base.css` comme feuille de style locale](/fr/guides/styling/#importer-une-feuille-de-style-locale).

#### nesting

Mettez `true` pour appliquer le [`tailwindcss/nesting` PostCSS plugin](https://tailwindcss.com/docs/using-with-preprocessors#nesting) afin que vous puissiez écrire des déclarations CSS imbriquées avec la syntaxe de Tailwind. Cette option est `false` par défaut.

```js ins="nesting: true"
// astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [
    tailwind({
      // Exemple : Permettre l'écriture de déclarations CSS imbriquées
      // à côté de la syntaxe de Tailwind
      nesting: true,
    }),
  ],
});
```

## Exemples

* [Astro Tailwind Starter](https://github.com/withastro/astro/tree/latest/examples/with-tailwindcss?on=github) vous permet de démarrer votre projet en utilisant Tailwind pour le stylisme.
* La page d'accueil d'Astro utilise Tailwind. Consultez son [fichier de configuration Tailwind](https://github.com/withastro/astro.build/blob/main/tailwind.config.ts) ou un [composant d'exemple](https://github.com/withastro/astro.build/blob/main/src/components/Checkbox.astro).
* Les thèmes [Astro Ink](https://github.com/one-aalam/astro-ink), [Sarissa Blog](https://github.com/iozcelik/SarissaBlogAstroStarter), [Astro Tech Blog](https://github.com/nicdun/astro-tech-blog)  et [Creek](https://github.com/robertguss/Astro-Theme-Creek) utilisent Tailwind pour le style.
* [Parcourir les projets Astro Tailwind sur GitHub](https://github.com/search?q=%22%40astrojs%2Ftailwind%22%3A+path%3A%2Fpackage.json\&type=code) pour plus d'exemples !

## Dépannage

### La classe n'existe pas avec les directives `@apply`

Lorsque vous utilisez la directive `@apply` dans une balise `<style>` d'Astro, Vue, Svelte ou d'une autre intégration de composant, cela peut générer des erreurs à propos de votre classe Tailwind personnalisée qui n'existe pas et faire échouer votre build.

```sh
error   The `text-special` class does not exist. If `text-special` is a custom class, make sure it is defined within a `@layer` directive.
```

[Au lieu d'utiliser les directives `@layer` dans une feuille de style globale](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), définissez vos propres styles en ajoutant un plugin à votre configuration Tailwind pour résoudre ce problème :

```js title="tailwind.config.mjs"
export default {
  // ...
  plugins: [
    function ({ addComponents, theme }) {
      addComponents({
        '.btn': {
          padding: theme('spacing.4'),
          margin: 'auto',
        },
      });
    },
  ],
};
```

### Les modificateurs basés sur les classes ne fonctionnent pas avec les directives `@apply`

Certaines classes Tailwind avec des modificateurs reposent sur la combinaison de classes à travers plusieurs éléments. Par exemple, `group-hover:text-gray` se compile en `.group:hover .text-gray`. Lorsque cela est utilisé avec la directive `@apply` dans les balises Astro `<style>`, les styles compilés sont supprimés de la sortie de la compilation parce qu'ils ne correspondent à aucune balise dans le fichier `.astro`. Le même problème peut se produire dans les composants du framework qui supportent les styles scopés comme Vue et Svelte.

Pour résoudre ce problème, vous pouvez utiliser des classes en ligne à la place :

```html "text-black group-hover:text-gray"
<p class="text-black group-hover:text-gray">Astro</p>
```

### Autres

* Si votre installation ne semble pas fonctionner, essayez de redémarrer le serveur de développement.
* Si vous modifiez et enregistrez un fichier et que votre site n'est pas mis à jour en conséquence, essayez de rafraîchir la page.
* Si l'actualisation de la page ne met pas à jour votre aperçu, ou si une nouvelle installation ne semble pas fonctionner, redémarrez le serveur de développement.

Pour obtenir de l'aide, consultez le canal `#support` sur [Discord](https://astro.build/chat). Nos sympathiques membres de l'équipe d'assistance sont là pour vous aider !

Vous pouvez également consulter notre [Documentation d'intégration Astro][astro-integration] pour plus d'informations sur les intégrations.

[astro-integration]: /fr/guides/integrations-guide/

[astro-ui-frameworks]: /fr/guides/framework-components/#utilisation-des-composants-de-framework
